<template>
	<div class="page">
		<div class="header">
			<div class="my-logo">
				<span>花卉分销管理系统</span>
			</div>
		</div>
		<div class="content">
			<div class="content-left">
				<img src="../assets/loginbg.png" />
			</div>
			<div class="content-right">
				<div class="my-login">
					<div class="login-title">
						<h4>用户登陆</h4>
					</div>

					<el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
						<el-form-item prop="username">
							<div class="form-model">
								<label>账号</label>
								<el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
							</div>
						</el-form-item>
						<el-form-item prop="password">
							<div class="form-model">
								<label>密码</label>
								<el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
							</div>
						</el-form-item>
						<div class="login-btn">
							<el-button type="success" @click="submitForm('loginForm')">登陆</el-button>
						</div>
					</el-form>
				</div>
			</div>
		</div>
		<div class="footbar">

		</div>
	</div>
</template>

<script>
	import { login } from '@/api/getData'
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},

			}
		},
		methods: {
			async submitForm(formName) {
				this.$refs[formName].validate(async(valid) => {
					if(valid) {

						var json = new Object();
						json.Name = this.loginForm.username;
						json.Password = this.loginForm.password;

						const res = await login(json);
						console.log(res);

					}
				});
			},

		}
	}
</script>

<style>
	.page {
		margin: 0;
		padding: 0;
		height: 100%;
		background: #eee;
	}
	
	.header {
		height: 4rem;
		background: #1da02b;
		padding: 0.5rem;
	}
	
	.my-logo {
		height: 100%;
		margin-left: 4rem;
		display: flex;
		align-items: center;
		font-size: 2rem;
		color: #fff;
		font-family: "楷体";
	}
	
	.content {
		height: 36rem;
		background: #fff;
		display: flex;
		justify-content: center;
	}
	
	.content-left {
		display: flex;
		align-items: center;
	}
	
	.content-left img {
		max-width: 30rem;
		height: auto;
	}
	
	.content-right {
		width: 32rem;
		display: flex;
		align-items: center;
	}
	
	.my-login {
		width: 22rem;
		margin: 1rem 1rem 1rem 6rem;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	
	.login-title {
		font-family: '楷体';
		border-left: 4px solid #1da02b;
		margin-top: 2rem;
		font-size: 1.5rem;
		padding: 0.05rem 0.2rem 0.05rem 2rem;
	}
	
	.login-form {
		padding: 1rem 2rem;
		display: flex;
		flex-direction: column;
	}
	
	.form-model {
		display: flex;
		padding-top: 0.5rem;
	}
	
	.form-model label {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 6rem;
		border: solid 1px #eee;
		border-right: none;
		background-color: #FBFBFB;
	}
	
	.login-btn {
		padding: 1rem;
	}
	
	.login-btn button {
		width: 100%;
	}
	
	@media screen and (max-width:965px) {
		/**当文档小于965px显示的样式**/
		.content-left {
			display: none;
		}
	}
</style>